import React from 'react';
import { Form, Input, Upload, Button, Spin } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { ChangeInfoProps } from '../types';
import styles from './index.less';

const { TextArea } = Input;

const ChangeInfo: React.FC<ChangeInfoProps> = ({ 
  changeInfo, 
  loading 
}) => {
  return (
    <div className={styles['form-section']}>
      <div className={styles['section-header']}>
        <div className={styles['section-title']}>变更说明</div>
        <div className={styles['section-icon']}>▼</div>
      </div>
      
      <div className={styles['section-content']}>
        <Spin spinning={loading}>
          <Form layout="vertical">
            <div className={styles['form-row']}>
              <div className={styles['form-item']}>
                <div className={styles['form-label']}>变更原因</div>
                <div className={styles['form-field']}>
                  <Input 
                    className={styles['form-control']} 
                    value={changeInfo.changeReason} 
                    readOnly
                  />
                </div>
              </div>
            </div>
            
            <div className={styles['form-row']}>
              <div className={styles['form-item']} style={{ width: '100%' }}>
                <div className={styles['form-label']}>变更说明</div>
                <div className={styles['form-field']}>
                  <TextArea 
                    className={styles['form-control']} 
                    value={changeInfo.changeDescription}
                    readOnly
                    rows={4}
                  />
                </div>
              </div>
            </div>
            
            <div className={styles['form-row']}>
              <div className={styles['form-item']} style={{ width: '100%' }}>
                <div className={styles['form-label']}>变更文档</div>
                <div className={styles['form-field']}>
                  <Upload>
                    <Button icon={<UploadOutlined />}>选择文件</Button>
                  </Upload>
                  <div className={styles['file-list']}>
                    {changeInfo.attachments.map((file, index) => (
                      <div key={index} className={styles['file-item']}>
                        {file}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </Form>
        </Spin>
      </div>
    </div>
  );
};

export default ChangeInfo; 